﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>RestFullAPI方式执行服务检查</title>
    <script src="../../WF/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // 触发GET请求的函数
            function fetchData() {
                // 显示加载动画
                $('#loading').addClass('active');

                const url = location.origin + '/WF/API/DTS_ExecuteTimeTrigger';
                debugger;
                // 执行GET请求
                $.get(url, function (data) {
                    // 请求成功时处理数据
                    $('#result').html(data); // 假设后端返回的是HTML内容

                    // 隐藏加载动画
                    $('#loading').removeClass('active');

                    // 你也可以在这里添加一些额外的动画效果，比如淡出
                    // $('#loading').fadeOut(500, function() {
                    //     $(this).remove(); // 如果你想要完全移除加载动画元素
                    // });
                }).fail(function () {
                    // 请求失败时处理错误
                    $('#result').html('Failed to fetch data.');

                    // 隐藏加载动画
                    $('#loading').removeClass('active');
                });
            }

            // 你可以在这里调用fetchData函数，比如页面加载完成后
            fetchData();
        });
    </script>
    <style type="text/css">
        /* 隐藏加载动画，默认情况下不显示 */
        .loading-animation {
            display: none;
            text-align: center;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            color: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000; /* 确保加载动画在其他内容之上 */
        }

        /* 你可以添加一些动画效果，比如淡入淡出 */
        .loading-animation.active {
            display: block;
            animation: fadeIn 1s;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div id="loading" class="loading-animation">Loading...</div>
<div id="result"></div>

</body>
</html>
